import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

export class Game3D{
    canvas: HTMLElement;
    renderer: THREE.WebGLRenderer;
    camera: THREE.PerspectiveCamera;
    scene: THREE.Scene;
    controls: OrbitControls;
    constructor(canvas:any){
        this.canvas = canvas;
        this.renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: false
        })
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setClearColor(new THREE.Color(0xf0f0f0));
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
        this.camera.position.set(3, 4, 5);
        this.camera.lookAt(new THREE.Vector3());
        this.controls = new OrbitControls( this.camera, this.renderer.domElement );

        this.addView();
        this.animate();
    }

    addView(){
        var mat = new THREE.MeshNormalMaterial();
        var geo = new THREE.BoxGeometry(1, 1, 1);
        var box = new THREE.Mesh(geo, mat);
        this.scene.add(box);
    }

    animate(): void {
        requestAnimationFrame(() => { this.animate() });
        this.renderer.render(this.scene, this.camera);
    }
}